import React, { useEffect } from 'react';

import {
  IRouteComponentProps,
  useDispatch,
  useSelector,
} from 'umi';

import { IArticleItem } from '@/types';

import style from './article-detail.less';

const Article: React.FC<IRouteComponentProps<{ id: string }>> = ({ match }) => {
  let { id } = match.params
  let dispatch = useDispatch()
  let { articleDetail } = useSelector((state: { article: IArticleItem }) => state.article)
  useEffect(() => {
    dispatch({
      type: "article/getArticleDetail",
      payload: id
    })
  }, [])

  return (
    <div className={style.article_detail} >
      <div className={style.article_detail_left} >
        <div className={style.article_detail_left_top} >
          <img src={articleDetail.cover} alt="" className={style.article_detail_left_top_img} />
        </div>
        <div className={style.article_detail_left_title} >
          <h1>{articleDetail.title}</h1>
          <p><i>发布于{articleDetail.createAt}</i>·<i>阅读量{articleDetail.views}</i></p>
        </div>
        <div className={style.article_detail_right_dangerouslySetInnerHTML} dangerouslySetInnerHTML={{ __html: articleDetail?.html }}></div>
      </div>
      <div className={style.article_detail_right} >

      </div>
    </div>
  )
}

export default Article
